<template>
  <div class="all">
    <table class="contentTable">
      <thead>
      <tr>
        <th colspan="2">
          查询设定
        </th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="contentTable-left">
          日期范围
        </td>
        <td>
          <div class="block">
            <label>
              <input type="text" v-model="dateBt" id="to">
            </label>
            —
            <label>
              <input type="text" v-model="dateEt" id="from">
            </label>
            <button @click="getDateToday">
              今天
            </button>
            <button @click="getDateLastToday">
              昨天
            </button>
            <button @click="getDateWeek">
              本星期
            </button>
            <button @click="getDateLastWeek">
              上星期
            </button>
            <button @click="getDateMonth">
              本月
            </button>
            <button @click="getDateLastMonth">
              上月
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="contentTable-left">
          模块
        </td>
        <td>
         模块
          <select v-model="module">
            <option value="0">
              全部
            </option>
          </select>
          功能
          <select v-model="effect">
            <option value="0">
              全部
            </option>
          </select>
          操作
          <select v-model="action">
            <option value="0">
              全部
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="contentTable-left">
          变更人
        </td>
        <td>
          <input type="text" v-model="userName">
        </td>
      </tr>
      <tr>
        <td class="contentTable-left">
          变更对象
        </td>
        <td>
          <input type="text" v-model="changePeople">
        </td>
      </tr>
      <tr>
        <td class="contentTable-left">
          IP地址
        </td>
        <td>
          <input type="text" v-model="IPAddress">
        </td>
      </tr>
      </tbody>
    </table>

    <el-row class="bottom-tip">
      备注：6AM-7AM是系统维护维护时间，会影响报表导出功能，敬请谅解
    </el-row>

    <el-row class="bottom">
      <button @click="submit">确认</button>
      <button>取消</button>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import $ from 'jquery'
  import 'jquery-ui/ui/widgets/datepicker'

  export default {
    name: 'backup',
    methods: {
      getDateToday() {
        const end = new Date()
        const start = new Date()
        // 小于今天6点取上一天
        if (end.getHours() < 6) {
          start.setTime(start.getTime() - 3600 * 1000 * 24)
          end.setTime(end.getTime() - 3600 * 1000 * 24)
          this.dateBt = this.CurentTime(start)
          this.dateEt = this.CurentTime(end)
        } else {
          this.dateBt = this.CurentTime(start)
          this.dateEt = this.CurentTime(end)
        }
      },
      getDateLastToday() {
        const end = new Date()
        const start = new Date()
        if (end.getHours() < 6) {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 2)
          this.dateBt = this.CurentTime(start)
          this.dateEt = this.CurentTime(end)
        } else {
          start.setTime(start.getTime() - 3600 * 1000 * 24)
          end.setTime(end.getTime() - 3600 * 1000 * 24)
          this.dateBt = this.CurentTime(start)
          this.dateEt = this.CurentTime(end)
        }
      },
      getDateWeek() {
        const end = new Date()
        const start = new Date()
        const date = new Date()
        var week = date.getDay() // 获取时间的星期数
        date.setDate(date.getDate() - week + 1)
        start.setTime(date)
        date.setDate(date.getDate() + 6)
        end.setTime(date)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      },
      getDateLastWeek() {
        const end = new Date()
        const start = new Date()
        const date = new Date()
        var week = date.getDay() // 获取时间的星期数
        date.setDate(date.getDate() - week)
        end.setTime(date)
        date.setDate(date.getDate() - 6)
        start.setTime(date)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      },
      getDateMonth() {
        const end = new Date()
        const start = new Date()
        const date = new Date()
        let currentMonth = date.getMonth()
        const nextMonth = ++currentMonth
        const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
        const oneDay = 1000 * 60 * 60 * 24
        const lastTime = new Date(nextMonthFirstDay - oneDay)
        start.setTime(date.setDate(1))
        end.setTime(lastTime)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      },
      getDateLastMonth() {
        const end = new Date()
        const start = new Date()
        const date = new Date()
        const oneDay = 1000 * 60 * 60 * 24
        const lastMonthlast = new Date(date.setDate(1) - oneDay) // 上个月最后一天
        let currentMonth = date.getMonth()
        const lastMonth = --currentMonth
        const lastMonthFirst = new Date(date.getFullYear(), lastMonth, 1) // 上个月第一天
        start.setTime(lastMonthFirst)
        end.setTime(lastMonthlast)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      },
      submit() {
        const params = {
          bt: this.dateRange[0],
          et: this.dateRange[0],
          ostatus: this.ostatus,
          games: [],
          username: this.userName,
          period: '',
          amount: this.memberAmount,
          dividend: this.dividend,
        }
        console.log(params)
        if (this.reportType === 1) {

        } else {

        }
      },
      CurentTime(value) {
        const now = new Date(value)
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const day = now.getDate()
        let clock = year + '-'
        if (month < 10) {
          clock += '0'
        }
        clock += month + '-'
        if (day < 10) {
          clock += '0'
        }
        clock += day
        return (clock)
      },
    },
    created() {
      const nowTime = new Date()
      this.dateBt = this.CurentTime(nowTime)
      this.dateEt = this.CurentTime(nowTime)
    },
    mounted() {
      $(function() {
        $('#to').datepicker({
          showMonthAfterYear: true,
          prevText: '上个月',
          nextText: '下个月',
          dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
          dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
          monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
            '七月', '八月', '九月', '十月', '十一月', '十二月'],
          dateFormat: 'yy-mm-dd',
          firstDay: 1,
        })
        $('#from').datepicker({
          showMonthAfterYear: true,
          prevText: '上个月',
          nextText: '下个月',
          dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
          dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
          monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
            '七月', '八月', '九月', '十月', '十一月', '十二月'],
          dateFormat: 'yy-mm-dd',
          firstDay: 1,
        })
      })
    },
    data() {
      return {
        dateRange: '', // 日期范围
        userName: '', // 变更人
        changePeople: '', // 变更对象
        IPAddress: '', // IP地址
        period: 1, // 彩种期数，选择单一彩种时可选
        module: 0, // 模块
        effect: 0, // 功能
        action: 0, // 操作
        dateBt: '',
        dateEt: '',
      }
    },
    computed: { ...mapGetters(['info']) },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .all{
    padding: 10px;
  }
  .contentTable{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }
  .contentTable th{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .contentTable td{
    height: 25px;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    border: 1px solid #B9C2CB;
    padding: 5px;
  }
  .contentTable td input[type='text']{
    width:100px;
  }
  .contentTable td select{
    min-width:70px;
    padding: 0 5px;
    vertical-align: middle;
    height:22px;
    line-height: 22px;
  }
  .contentTable td .el-radio{
    margin:0 5px;
  }
  .contentTableBtn{
    margin:0 5px;
    background-color: #00b45a;
    border:0;
    padding: 5px 10px;
    color:#FFF;
  }
  .contentTableBtn:hover{
    text-decoration: underline;
  }
  .contentTable ul li{
    height:25px;
    line-height: 25px;
  }
  .block span{
    padding:0 !important;
  }
  .contentTable hr{
    width:600px;
    display: inline-block;
    vertical-align: middle;
  }
  .contentTable-left{
    text-align: right;
    color: #344b50;
    background: #f2f2f2;
    width:30%;
  }

  .bottom-tip{
    text-align: center;
    color:red;
    font-size:13px;
    margin: 10px;
  }

  .bottom{
    text-align: center;
    margin-top: 20px;
  }
  .bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }
</style>
<style>
  .block .el-date-editor .el-range-separator{
    padding: 0;
  }
</style>
